PureScript & Halogenで最小のプロジェクトを作成する - mrsekut-p

PureScript & Halogenで最小のプロジェクトを作成する

PureScript & Halogenで最小のプロジェクトを作成する

前提

pursとspagoはglobalに入っているものとする

いずれもnpmでglobalに入れる

purtyも入れる

プロジェクト作成

$ mkdir hoge && cd hoge

$ spago init

$ git init

.gitignoreはinit時に自動で生成されているが、gitが初期化されていないので。

$ npm init -y

$ npm i parcel --save-dev

Halogenをインスコ

$ spago install halogen

PureScriptを書く

Halogen v6.1.2

Mainをコンパイルしてindex.jsにする

$ spago bundle-app -m Main -t assets/index.js

index.jsと同じ階層にindex.htmlを作成

$ vim assets/index.html

code:最小.html

<!DOCTYPE html>

<html>

<body>

<div id="app"></div>

<script src="index.js"></script>

</body>

</html>

gitignoreに追記する

code:.gitignore

.parcel-cache/

/dist

/assets/index.js

package.jsonに追記

code:package.json

"scripts": {

"watch": "spago bundle-app -w -m Main -t assets/index.js",

"serve": "parcel serve assets/index.html --open",

"test": "spago test"

},

ブラウザで表示

$ npm run watch

別ターミナルで、$ npm run serve

これを実行しておくと、hot reloadしてくれる

表示されているURLにアクセス！

ex. http://localhost:1234

最終的なディレクトリ構成はこんな感じ

code:dir

.

├── assets

│ ├── index.html

│ └── index.js

├── dist

├── hoge.txt

├── node_modules

├── output

├── package-lock.json

├── package.json

├── packages.dhall

├── README.md

├── spago.dhall

├── src

│ └── Main.purs

└── test

└── Main.purs